<template>
  <div class="hotword">
    <search-list
      :api-url="$url.HotwordList"
      :option="searchOpt"
      :itemPerRow="8"
      @selection-change="selectionChange"
      ref="hwSearchList"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="词文本" prop="word"></el-table-column>
      <el-table-column label="权重" prop="weight"></el-table-column>

      <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="check(scope.row)">管理</el-button>
          </div>
        </template>
      </el-table-column>

      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button type="success" icon="el-icon-plus" @click="add">新增热词</el-button>
        <el-button
          type="danger"
          icon="el-icon-close"
          :disabled="scope.selectedData.length === 0"
          @click="del"
        >
          删除热词
        </el-button>
      </div>
    </search-list>

    <el-dialog
      :title="hotwordInfo.id ? '修改热词信息' : '新增热词信息'"
      :visible.sync="hwDialogShow"
      width="500px"
    >
      <el-form :model="hotwordInfo" ref="hotwordInfoForm">
        <el-form-item prop="word" label="词文本">
          <el-input v-model.trim="hotwordInfo.word"></el-input>
        </el-form-item>
        <el-form-item prop="weight" label="权重(填数字,大的靠前)">
          <el-input v-model.number="hotwordInfo.weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">关 闭</el-button>
        <el-button type="success" @click="saveHotwordInfo" icon="el-icon-check">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedData: [],
        hotwordInfo: {},
        hwDialogShow: false,
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'word',
            label: '词文本',
          },
        ],
      };
    },
    methods: {
      /**
       * 管理
       */
      check(row) {
        this.hotwordInfo = { ...row };
        this.hwDialogShow = true;
      },
      /**
       * 新增
       */
      add() {
        this.hotwordInfo = {};
        this.hwDialogShow = true;
      },
      /**
       * 保存
       */
      saveHotwordInfo() {
        this.$service.HotwordSave(this.hotwordInfo, JSON_HEADER).then((res) => {
          this.$message.success('提交成功');
          this.hwDialogShow = false;

          this.dialogClose();
        });
      },
      /**
       * 删除
       */
      del(row) {
        this.$confirm('确认要删除这个热词吗?删了就没有了', '', {
          type: 'error',
        }).then((res) => {
          this.$service
            .HotwordDelete({
              hotwordIds: this.selectedData.map((data) => data.id).join(','),
            })
            .then((res) => {
              this.$refs.hwSearchList.getList();
            });
        });
      },
      dialogClose() {
        this.mediaInfo = {};
        this.formDialogShow = false;
      },
      /**
       * 选择数据回调
       */
      selectionChange(val) {
        this.selectedData = [...val];
      },
    },
  };
</script>

<style lang="less" scoped>
  .hot-word {
  }
</style>
